<template>
  <GenericCrud :config="crudConfig">
    <!-- 自定义列表项样式 -->
    <template #record-item="{ records, actions }">
      <view v-for="record in records" :key="record.id" class="simple-card bg-white m-[24rpx] rounded-[16rpx] shadow-md p-[24rpx]">
        <view class="flex justify-between items-start mb-[16rpx]">
          <view>
            <text class="text-[28rpx] font-bold text-gray-800">{{ record.name }}</text>
            <text class="text-[22rpx] text-gray-500 block mt-[4rpx]">ID: {{ record.recordid }}</text>
          </view>
          <text class="text-[20rpx] text-gray-500">{{ actions.formatDate(record.createTime) }}</text>
        </view>
        
        <view class="flex flex-wrap gap-[8rpx] mb-[16rpx]">
          <view v-for="(value, key) in actions.getDisplayFields(record)" :key="key" 
                class="px-[8rpx] py-[4rpx] bg-blue-100 text-blue-700 rounded-[8rpx] text-[20rpx]">
            {{ actions.getFieldLabel(key) }}: {{ value }}
          </view>
        </view>
        
        <view class="flex gap-[12rpx]">
          <nut-button size="small" type="primary" class="flex-1" @click.stop="actions.goEdit(record.id)">编辑</nut-button>
          <nut-button size="small" type="danger" class="flex-1" @click.stop="actions.deleteRecord(record.id)">删除</nut-button>
        </view>
      </view>
    </template>
  </GenericCrud>
</template>

<script setup lang="ts">
import GenericCrud from '@/components/GenericCrud.vue'
import { socioeconomicFields } from './fields'

const crudConfig = {
  pageTitle: '社会经济学信息',
  searchPlaceholder: '患者姓名',
  emptyIcon: '📊',
  emptyText: '暂无记录',
  addButtonText: '添加第一条',
  recordIcon: 'icon-user',
  listApi: '/health_records/socioeconomic/socioeconomicInfo/list',
  addApi: '/health_records/socioeconomic/socioeconomicInfo/add',
  editApi: '/health_records/socioeconomic/socioeconomicInfo/update',
  deleteApi: '/health_records/socioeconomic/socioeconomicInfo/delete',
  queryByIdApi: '/health_records/socioeconomic/socioeconomicInfo/queryById',
  fieldConfig: socioeconomicFields,
  addRoute: './add',
  editRoute: './edit',
  displayFields: ['liveAddr', 'workType', 'incomeLevel', 'mediType']
}
</script>

<style scoped>
.simple-card {
  transition: all 0.3s ease;
}

.simple-card:active {
  transform: scale(0.98);
}
</style>
